<template>
	<el-dialog :visible.sync="sendSmsDialogVisible" :title="$t('common.base.toast')" width="500px">
		<div>
			<span>{{ $t('common.modal.REVIEW_TASK_SMS_MESSAGE') }}</span>
			<el-button :loading="viewSmsContentLoading" type="text" @click="viewSmsContent()" v-if="ids.length === 1">
				{{$t('common.task.viewSmsContent')}}
			</el-button>
			<div v-if="smsContent" class="sms-box">
				<div class="sms-content">
					{{ smsContent }}
				</div>
			</div>
		</div>

		<template slot="footer">
			<div>
				<el-button @click="sendSmsDialogVisible = false">{{$t('common.base.cancel')}}</el-button>
				<el-button :loading="sendReviewSmsCheckLoading" type="primary" @click="sendReviewSmsCheck">{{$t('common.base.confirm')}}</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script>
import { ref, watch } from 'vue'
import { Message } from 'element-ui'

// api
import { sendReviewMessage, previewTaskReviewMessage } from '@src/api/TaskApi'
export default {
	name: 'send-sms-dialog',
	props: {
		ids: {
			type: Array,
			default: '',
		}
	},
	emits: ['input'],
	setup(props, { emit }) {
		const sendSmsDialogVisible = ref(props.value)
		const sendReviewSmsCheckLoading = ref(false)
		const smsContent = ref('')
		const viewSmsContentLoading = ref(false)

		const openOrCloseDialog = newValue => {
			sendSmsDialogVisible.value = newValue
		}

		watch(sendSmsDialogVisible, newValue => {
			if(!newValue) {
				smsContent.value = ''
			}
		})

		// 查看回访短信
		const viewSmsContent = async () => {
			let res
			viewSmsContentLoading.value = true
			try {
				res = await previewTaskReviewMessage({ taskId: props.ids?.[0] })
			} catch (error) {
				console.log(error)
			}
			viewSmsContentLoading.value = false
			if(res?.errorCode === 0) {
				smsContent.value = res.data || ''
			} else {
				res?.message && this.$message.error(res?.message)
			}
		}

		// 发送回访短信（点击确定按钮）
		const sendReviewSmsCheck = async () => {
			if (!props.ids?.length) return
			const params = {
				type: 'AUTO_REVIEW',
				contentList: props.ids
			}
			sendReviewSmsCheckLoading.value = true
			try {
				const { errorCode, message } = await sendReviewMessage(params)
				sendReviewSmsCheckLoading.value = false

				Message({
					type: errorCode === 0 ? 'success' : 'error',
					message,
				})

				if (errorCode === 0) {
					sendSmsDialogVisible.value = false
				}
			} catch(e) {
				console.log(e)
				Message.error($t('common.base.tip.requestFail'))
			}
			sendReviewSmsCheckLoading.value = false
		}

		return {
			openOrCloseDialog,
			sendSmsDialogVisible,
			sendReviewSmsCheckLoading,
			viewSmsContentLoading,
			smsContent,
			viewSmsContent,
			sendReviewSmsCheck
		}
	}
}
</script>

<style lang="scss" scoped>
	.sms-box {
		padding: 12px 0;
		border-radius: 4px;
		background: #f5f5f5;
		.sms-content {
			// 200 - box的padding
			max-height: 176px;
			overflow: auto;
			padding: 0 12px;
			color: #595959;
		}
	}
	::v-deep .el-dialog__headerbtn {
		top: 0 !important;
	}
	::v-deep .base-modal-body {
    padding: 20px;
  }
</style>